<template>
  <view class="detail-container">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-avatar">
        <image :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-vip" v-if="userInfo.isVip">
          <text class="iconfont icon-vip"></text>
          <text>VIP</text>
        </view>
      </view>
      <view class="user-info">
        <view class="user-basic">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-age">{{ userInfo.age }}岁</text>
          <text class="user-gender" :class="userInfo.gender === '男' ? 'male' : 'female'">
            {{ userInfo.gender }}
          </text>
        </view>
        <view class="user-location">
          <text class="iconfont icon-location"></text>
          <text>{{ userInfo.location }}</text>
        </view>
        <view class="user-tags">
          <text class="tag" v-for="(tag, index) in userInfo.tags" :key="index">{{ tag }}</text>
        </view>
      </view>
    </view>

    <!-- 图片展示 -->
    <view class="image-gallery">
      <view class="image-row" v-for="(row, rowIndex) in imageRows" :key="rowIndex">
        <view class="image-item" v-for="(item, index) in row" :key="item.id" @click="previewImage(item.id)">
          <image :src="item.image" mode="aspectFill"></image>
          <view class="image-count" v-if="rowIndex === imageRows.length - 1 && index === row.length - 1 && userInfo.imageCount > imageList.length">
            <text>+{{ userInfo.imageCount - imageList.length }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 用户详情信息 -->
    <view class="user-details">
      <view class="detail-item" v-for="(item, index) in detailList" :key="index">
        <text class="detail-label">{{ item.label }}</text>
        <text class="detail-value">{{ item.value || '未填写' }}</text>
      </view>
    </view>

    <!-- 更多信息（需要付费查看） -->
    <view class="more-info" v-if="showMoreInfo">
      <view class="lock-icon">
        <text class="iconfont icon-lock"></text>
      </view>
      <text class="lock-text">更多详细信息需要付费查看</text>
      <button class="pay-button" @click="goPay">立即解锁查看</button>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="chat-button">
        <text class="iconfont icon-chat"></text>
        <text>聊天</text>
      </button>
      <button class="like-button">
        <text class="iconfont icon-like"></text>
        <text>喜欢</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        id: '',
        avatar: '',
        name: '',
        age: 0,
        gender: '男',
        location: '',
        isVip: false,
        tags: [],
        imageCount: 0,
        detailInfo: {}
      },
      imageList: [],
      imageRows: [],
      detailList: [],
      showMoreInfo: false
    }
  },
  onLoad(options) {
    this.getUserDetail(options.id)
  },
  methods: {
    // 获取用户详情
    getUserDetail(id) {
      // 模拟请求数据
      setTimeout(() => {
        // 模拟用户数据
        const mockUser = {
          id: id,
          avatar: 'https://picsum.photos/200/200?random=10',
          name: '张三',
          age: 28,
          gender: '男',
          location: '北京市朝阳区',
          isVip: true,
          tags: ['爱旅行', '电影', '美食', '健身'],
          imageCount: 9,
          detailInfo: {
            height: '180cm',
            weight: '75kg',
            education: '本科',
            occupation: '互联网产品经理',
            income: '15-20k',
            house: '已购房',
            car: '已购车',
            smoking: '不吸烟',
            drinking: '偶尔喝酒',
            religion: '无',
            marriage: '未婚',
            children: '无',
            selfIntro: '热爱生活，喜欢探索新事物，期待找到志同道合的伴侣。'
          }
        }
        
        // 模拟图片数据
        const mockImages = []
        for (let i = 1; i <= Math.min(6, mockUser.imageCount); i++) {
          mockImages.push({
            id: i,
            image: `https://picsum.photos/300/400?random=${10 + i}`
          })
        }
        
        // 处理图片布局（每行2张）
        const rows = []
        for (let i = 0; i < mockImages.length; i += 2) {
          rows.push(mockImages.slice(i, i + 2))
        }
        
        // 处理详情信息
        const details = [
          { label: '身高', value: mockUser.detailInfo.height },
          { label: '体重', value: mockUser.detailInfo.weight },
          { label: '学历', value: mockUser.detailInfo.education },
          { label: '职业', value: mockUser.detailInfo.occupation },
          { label: '收入', value: mockUser.detailInfo.income },
          { label: '住房', value: mockUser.detailInfo.house },
          { label: '购车', value: mockUser.detailInfo.car }
        ]
        
        // 判断是否需要显示更多信息（付费内容）
        const showMore = Object.keys(mockUser.detailInfo).length > details.length
        
        this.userInfo = mockUser
        this.imageList = mockImages
        this.imageRows = rows
        this.detailList = details
        this.showMoreInfo = showMore
      }, 800)
    },
    
    // 预览图片
    previewImage(id) {
      const urls = this.imageList.map(item => item.image)
      uni.previewImage({
        current: urls[id - 1],
        urls: urls
      })
    },
    
    // 去付费页面
    goPay() {
      uni.showModal({
        title: '解锁更多信息',
        content: '支付9.9元即可查看完整用户资料和更多详细信息',
        confirmText: '立即支付',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '支付成功，正在加载更多信息...',
              icon: 'none',
              duration: 2000
            })
            
            // 模拟支付成功后加载更多信息
            setTimeout(() => {
              const moreDetails = [
                { label: '是否吸烟', value: this.userInfo.detailInfo.smoking },
                { label: '饮酒习惯', value: this.userInfo.detailInfo.drinking },
                { label: '宗教信仰', value: this.userInfo.detailInfo.religion },
                { label: '婚姻状况', value: this.userInfo.detailInfo.marriage },
                { label: '子女情况', value: this.userInfo.detailInfo.children },
                { label: '自我介绍', value: this.userInfo.detailInfo.selfIntro }
              ]
              
              this.detailList = [...this.detailList, ...moreDetails]
              this.showMoreInfo = false
            }, 2000)
          }
        }
      })
    }
  }
}
</script>

<style>
.detail-container {
  background-color: #fff;
  min-height: 100vh;
}

.user-header {
  display: flex;
  padding: 40rpx 30rpx;
  background-color: #f8f8f8;
}

.user-avatar {
  position: relative;
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.user-vip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-vip .iconfont {
  margin-right: 8rpx;
}

.user-info {
  flex: 1;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.user-basic {
  display: flex;
  align-items: center;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.user-age {
  font-size: 28rpx;
  color: #666;
  margin-right: 15rpx;
}

.user-gender {
  display: inline-block;
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  border-radius: 50%;
  font-size: 24rpx;
}

.male {
  background-color: #409EFF;
  color: #fff;
}

.female {
  background-color: #FF6B81;
  color: #fff;
}

.user-location {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.user-location .iconfont {
  margin-right: 10rpx;
}

.user-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.tag {
  display: inline-block;
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 24rpx;
  border-radius: 24rpx;
  margin-right: 15rpx;
  margin-bottom: 10rpx;
}

.image-gallery {
  padding: 30rpx;
}

.image-row {
  display: flex;
  margin-bottom: 20rpx;
}

.image-item {
  flex: 1;
  height: 450rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
}

.image-item:last-child {
  margin-right: 0;
}

.image-item image {
  width: 100%;
  height: 100%;
}

.image-count {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.user-details {
  padding: 0 30rpx 30rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #eee;
}

.detail-label {
  width: 200rpx;
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.more-info {
  padding: 60rpx 30rpx;
  text-align: center;
}

.lock-icon {
  width: 120rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 50%;
  margin: 0 auto 30rpx;
}

.lock-icon .iconfont {
  font-size: 60rpx;
  color: #999;
}

.lock-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.pay-button {
  width: 500rpx;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #FF4500;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin: 0 auto;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  display: flex;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.chat-button, .like-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.chat-button {
  color: #409EFF;
}

.like-button {
  color: #FF4500;
}

.chat-button .iconfont, .like-button .iconfont {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}
</style>
    